import Vue from "vue";

import App from "./App.vue";

import TsUser from "./TsUser.vue";
import TsList from "./TsList.vue";
import TsCart from "./TsCart.vue";

Vue.component("TsUser", TsUser);
Vue.component("TsList", TsList);
Vue.component("TsCart", TsCart);

Vue.mixin({
  data() {
    return {
      count: 100,
    };
  },
  methods: {
    add(x) {
      return x + this.count;
    },
  },
  computed: {},
});

let h = null;
Vue.directive("clock", {
  unbind(el) {
    //当组件销毁时候执行，清除定时器
    clearInterval(h);
  },
  inserted(el, binding) {
    h = setInterval(() => {
      const d = new Date();
      el.innerHTML = d.toLocaleString();
      console.log("run");
    }, 1000);
  },
});

Vue.directive("css", function (el, binding) {
  // 接收参数和值
  el.style[binding.arg] = binding.value;
  // 接收修饰符
  if (binding.modifiers.i) {
    el.style.fontStyle = "italic";
  }
  if (binding.modifiers.u) {
    el.style.textDecoration = "underline";
  }
});

new Vue({
  render: (h) => h(App),
}).$mount("#app");
